<template>
  <div style="display: flex; align-items: center; gap: 8px;">
    <el-icon style="cursor:pointer;font-size:22px;" @click="toggleTheme">
      <component :is="isBlue ? Moon : Sunny" />
    </el-icon>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { Sunny, Moon } from '@element-plus/icons-vue'

const isBlue = ref(false)

function applyTheme(blue) {
  document.documentElement.setAttribute('data-theme', blue ? 'blue' : 'glass')
  if (blue) {
    document.documentElement.classList.add('dark')
    // 设置Element Plus的CSS变量
    document.documentElement.style.setProperty('--el-bg-color', '#f7fbff')
    document.documentElement.style.setProperty('--el-text-color-primary', '#1a237e')
    document.documentElement.style.setProperty('--el-border-color', '#e0e0e0')
    document.documentElement.style.setProperty('--el-fill-color-light', '#e3f2fd')
    document.documentElement.style.setProperty('--el-fill-color-dark', 'rgba(0, 0, 0, 0.1)')
    document.documentElement.style.setProperty('--el-text-color-secondary', '#6b7b8c')
  } else {
    document.documentElement.classList.remove('dark')
    // 重置为默认值
    document.documentElement.style.setProperty('--el-bg-color', 'rgba(255,255,255,0.95)')
    document.documentElement.style.setProperty('--el-text-color-primary', '#222')
    document.documentElement.style.setProperty('--el-border-color', '#e0e0e0')
    document.documentElement.style.setProperty('--el-fill-color-light', '#f8f9fa')
    document.documentElement.style.setProperty('--el-fill-color-dark', 'rgba(0, 0, 0, 0.1)')
    document.documentElement.style.setProperty('--el-text-color-secondary', '#6b7b8c')
  }
}

function toggleTheme() {
  isBlue.value = !isBlue.value
  applyTheme(isBlue.value)
  localStorage.setItem('theme', isBlue.value ? 'blue' : 'glass')
}

onMounted(() => {
  const saved = localStorage.getItem('theme')
  if (saved === 'blue') {
    isBlue.value = true
    applyTheme(true)
  } else {
    isBlue.value = false
    applyTheme(false)
  }
})
</script>
<style>
:root[data-theme='blue'] {
  --el-bg-color: #f7fbff;
  --el-bg-gradient: linear-gradient(135deg, #e3efff 0%, #c6e0ff 100%);
  --el-text-color-primary: #1a237e;
  --el-text-color-secondary: #6b7b8c;
  --el-menu-bg-color: #1976d2;
  --el-menu-text-color: #fff;
  --el-menu-active-color: #42a5f5;
  --el-dialog-bg-color: #fff;
  --el-border-color: #e0e0e0;
  --el-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
  --el-btn-primary: #409EFF;
  --el-btn-primary-hover: #1976d2;
  background: #f0f6ff;
  color: #1a237e;
  --scrollbar-thumb: #90caf9;
  --scrollbar-track: #e3f2fd;
}
:root[data-theme='glass'] {
  --el-bg-color: rgba(255,255,255,0.95);
  --el-bg-gradient: linear-gradient(135deg, #e3efff 0%, #c6e0ff 100%);
  --el-text-color-primary: #222;
  --el-text-color-secondary: #6b7b8c;
  --el-menu-bg-color: linear-gradient(135deg, #dbeafe 0%, #a5b4fc 100%);
  --el-menu-text-color: #222;
  --el-menu-active-color: #409EFF;
  --el-dialog-bg-color: rgba(255,255,255,0.95);
  --el-border-color: #e0e0e0;
  --el-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10);
  --el-btn-primary: #409EFF;
  --el-btn-primary-hover: #1976d2;
  background: linear-gradient(135deg, rgba(255,255,255,0.85) 60%, rgba(240,245,255,0.6) 100%);
  color: #222;
  --scrollbar-thumb: rgba(180,180,180,0.5);
  --scrollbar-track: rgba(255,255,255,0.3);
  backdrop-filter: blur(16px);
  --sidebar-logo-bg: linear-gradient(180deg, #4f7cf7 0%, #6ea8fe 100%);
}

/* 渐变透明白主题适配 */
/* 高级透明亮色主题适配 */
.el-container,
.el-header,
.el-main,
.el-aside,
.el-table,
.el-dialog,
.el-card {
  background: var(--el-bg-color) !important;
  color: var(--el-text-color-primary) !important;
  box-shadow: var(--el-shadow);
  backdrop-filter: blur(24px) saturate(180%);
  border-radius: 18px;
  border: 1px solid var(--el-border-color);
}
.el-menu {
  background: var(--el-menu-bg-color) !important;
  color: var(--el-menu-text-color) !important;
  box-shadow: var(--el-shadow);
  backdrop-filter: blur(24px) saturate(180%);
  border-radius: 18px;
  border: 1px solid var(--el-border-color);
}
.el-menu-item,
.el-sub-menu__title {
  background: transparent !important;
  color: var(--el-menu-text-color) !important;
}
.el-menu-item.is-active {
  color: var(--el-menu-active-color) !important;
  background: #e3f2fd !important;
  border-radius: 8px !important;
  transition: background 0.3s;
}
body {
  background: var(--el-bg-color);
  color: var(--el-text-color-primary);
  transition: background 0.3s, color 0.3s;
}

/* 滚动条样式适配主题 */
body,
.el-main,
.el-table__body-wrapper,
.el-dialog__body,
.el-table__body,
.el-table__header-wrapper,
.el-table__footer-wrapper,
.el-table__body,
.el-table__body-wrapper,
.el-table__fixed-body-wrapper,
.el-table__fixed-right-body-wrapper,
.el-table__fixed,
.el-table__fixed-right,
.el-table__body-wrapper,
.el-table__header,
.el-table__footer {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}

/* Webkit 滚动条 */
body::-webkit-scrollbar,
.el-main::-webkit-scrollbar,
.el-table__body-wrapper::-webkit-scrollbar,
.el-dialog__body::-webkit-scrollbar {
  width: 8px;
  background: var(--scrollbar-track);
}
body::-webkit-scrollbar-thumb,
.el-main::-webkit-scrollbar-thumb,
.el-table__body-wrapper::-webkit-scrollbar-thumb,
.el-dialog__body::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}
body::-webkit-scrollbar-corner,
.el-main::-webkit-scrollbar-corner,
.el-table__body-wrapper::-webkit-scrollbar-corner,
.el-dialog__body::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}
</style>
